<template>
	<div class="page">
		<div class="bg">
			<div class="head">
				<img :src="user" alt="">
				<div class="user-right">
					<span class="phone">{{phone}}</span>
					<div class="user-team">{{fleetName}}</div>
				</div>
			</div>
		</div>
		<group>
			<cell
			title="切换车队"
      is-link
      :border-intent="false"
      :arrow-direction="show ? 'up' : 'down'"
      @click.native="show = !show">
			</cell>
      <div class="slide" :class="show ? 'animate' : ''">
				<p  @click="chooseTeam($event)" 
					  v-for="(item,index) in allCarInfo"
						:key="index"
						:class="item.fleetName === checkName ? 'check-color' : ''"
				>{{item.fleetName}}<img v-show="item.fleetName === checkName" :src="radio" alt=""></p>
			</div>
		</group>
		<x-button 
		type="primary" 
		class="custom-primary"
		action-type="button" 
		@click.native="logout"
		text="退出登录">
		</x-button>
		<v-loading v-show="loadingShow"></v-loading>
		<tab />
	</div>
</template>

<script>
	import Tab from '@/components/bidding/tab/tab'
	import Loading from '@/components/common/loading/loading'
	import { Toast } from 'mint-ui'
	import { XButton, Group, Cell } from 'vux'
	import * as THreeStorage from '@/utils/store/token.js'
	export default {
	  name: 'bid-user',
	  data() {
	    return {
	      loadingShow: false,
	      user: require('@/assets/image/v1/bid/user@2x.png'),
	      radio: require('@/assets/image/v1/bid/radio@2x.png'),
	      phone: THreeStorage.getCarInfo().phone,
	      fleetName: THreeStorage.getCarInfo().fleetName,
	      allCarInfo: THreeStorage.getAllCarInfo().allCarInfo,
	      show: false,
	      checkName: THreeStorage.getCarInfo().fleetName
	    }
	  },
	  components: {
	    Tab, Toast, XButton, Group, Cell,
	    'v-loading': Loading
	  },
	  created() {
	    this.getUser()
	  },
	  methods: {
	    getUser() {
	      this.phone = THreeStorage.getCarInfo().phone
	      this.fleetName = THreeStorage.getCarInfo().fleetName
	    },
	    chooseTeam(e) {
	      this.show = !this.show
	      const Name = e.target.innerText
	      for (let i = 0; i < this.allCarInfo.length; i++) {
	        if (this.allCarInfo[i].fleetName === Name) {
	          this.checkName = this.allCarInfo[i].fleetName
	          // 重置当前车队信息
	          const carInfo = {
	            currentFleetId: this.allCarInfo[i].id,
	            fleetName: this.allCarInfo[i].fleetName,
	            phone: THreeStorage.getCarInfo().phone
	          }
	          // 存之后调用取的方法
	          THreeStorage.setCarInfo(carInfo)
	          this.getUser()
	        }
	      }
	    },
	    logout() {
	      this.$store.dispatch('FedLogOut')
	    }
	  }
	}
</script>

<style scoped>
	@import '../../styles/util.css';
	.page {
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		background-color: #fff;
	}
	.bg{
		width: 100%;
		height: 1.5rem;
		background-image: url(../../assets/image/v1/bid/me-bg@2x.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		margin-bottom: 0.15rem;
	}
	.head{
		padding: 0.45rem 0 0 0.16rem;
		display: flex;
	}
	.head img{
		width: 0.5rem;
		height: 0.5rem;
	}
	.head .user-right{
		padding-left: 0.16rem;
		padding-top: 0.1rem;
	}
	.phone{
		color: #fff;
		font-size: 0.15rem;
		font-weight: bold;
		padding-bottom: 0.11rem;
	}
	.user-right {
		text-align: left;
	}
	.user-right .user-team{
		font-size: 0.15rem;
		color: #fff;
	}
	.custom-primary{
		width: 90%;
		color: #fff;
		font-size: 0.18rem;
		position: absolute;
		bottom: 1.04rem;
		left: 5%;
		right: 5%;
	}
	.page>>>.weui-cell{
		color: #575757;
		height: 0.18rem;
		text-align: left;
		background: #fff;
		border-bottom: 1px solid #eaf0f5;
	}
	.page>>>.vux-label{
		margin-right: 0.1rem;
		font-size: 0.18rem;
	}
	.page>>>.weui-cell_access .weui-cell__ft.vux-cell-arrow-up:after{
		margin-top: -3px;
	}
	.page>>>.weui-cell_access .weui-cell__ft.vux-cell-arrow-down:after{
		margin-top: -8px;
	}
	.slide {
		font-size: 0.18rem;
		color: #575757;
		background: #f0f4f8;
		overflow: hidden;
		max-height: 0;
		transition: max-height .5s cubic-bezier(0, 1, 0, 1) -.1s;
		padding: 0 20px;
	}
	.slide p{
		height: 0.45rem;
		line-height: 0.45rem;
		text-align: left;
		padding: 0 0.05rem;
		border-bottom: 1px solid #eaf0f5;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.slide p:last-child{
		border-bottom: none;
	}
	.slide img{
		width: 0.18rem;
		height: 0.18rem;
	}
	.check-color{
		color: #54b9f4;
	}
	.animate {
		max-height: 9999px;
		transition-timing-function: cubic-bezier(0.5, 0, 1, 0);
		transition-delay: 0s;
		border-bottom: 1px solid #eaf0f5;
	}
</style>
